* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #00034b;
}

.container .ghost {
    position: relative;
    width: 150px;
    height: 225px;
    /* 左上角和右上角为圆角 */
    border-radius: 75px 75px 0 0;
    background-color: #fff;
    box-shadow: -17px 0 0 #dbdbdb inset, 0 0 50px #5939db;
    animation: ghost 2s infinite;
}

/* 眼睛 */
.container .ghost .ghostEyes {
    display: flex;
    justify-content: space-around;
    width: 90px;
    padding-top: 70px;
    margin: 0 auto;
}

.container .ghost .ghostEyes::before,
.container .ghost .ghostEyes::after {
    content: "";
    width: 15px;
    height: 25px;
    border-radius: 50%;
    background-color: #00034b;
}

/* 腮红 */
.container .ghost .ghostDimples {
    display: flex;
    justify-content: space-around;
    width: 130px;
    margin: 15px auto 0;
}

.container .ghost .ghostDimples::before,
.container .ghost .ghostDimples::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffbeff;
}

/* 脚 */
.container .ghost .ghostFeet {
    display: flex;
    position: absolute;
    bottom: -13px;
    width: 100%;
}

.container .ghost .ghostFeet .ghostFoot {
    width: 25%;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
}

.container .ghost .ghostFeet .ghostFoot:last-child {
    background-image: linear-gradient(to right, #fff 55%, #dbdbdb 45%);
}

/* 阴影 */
.container .shadow {
    width: 150px;
    height: 40px;
    background-color: #000232;
    border-radius: 50%;
    margin-top: 50px;
    animation: shadow 2s infinite;
}

/* 定义漂浮动画 */
@keyframes ghost {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes shadow {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
}
